<script lang="ts">
    import { invoke } from "@tauri-apps/api";
    import EditOff from "carbon-icons-svelte/lib/EditOff.svelte";
    export let hidden = false;
    export let path = "";
</script>

<div class="container" class:hidden>
    <div class="unsupported">
        <EditOff size={32} />
        <span class="desc">文件无法显示，因为它要么是二进制文件，要么使用了不受支持的文本编码。</span>
        <span class="link" on:click={() => {invoke("open_in_explorer", {path: path})}}>在资源管理器里打开</span>
    </div>
</div>

<style lang="scss">
    .container {
        height: 100%;
        display: flex;
        .unsupported {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 60%;
            width: 100%;
            :global(svg) {
                width: 48px;
                height: 48px;
                padding: 20px 0;
            }
            .link {
                font-size: 0.9rem;
                cursor: pointer;
                text-decoration: underline;
                padding: 5px 0;
            }
        }
    }
    .hidden {
        display: none !important;
    }
</style>